<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<base href="${base}/" />
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admin.css">
</head>
<script src="js/jquery-3.5.0.js"></script>
<script src="js/template-web.js"></script>
<script src="layer/layer.js"></script>
<script src="laydate/laydate.js"></script>
<script>
	$(function() {
		

		function showpage(p) {
			let orderno = $("#orderno").val();
			let starttime = $("#starttime").val();
			let endtime = $("#endtime").val();
			let status = $("#status").val();
			let url = "order?opr=list&p=" + p + "&starttime=" + starttime
					+ "&endtime=" + endtime + "&status=" + status;
			$.getJSON(url, function(result) {
				if (result.code == 200) {
					let orderHtml = template("orderdata", {
						orders : result.data.list
					});
					$("#orderbody").html(orderHtml);

					//设置导航栏
					let navlist = [];
					let nowPage = result.data.nowPage;
					let totalPage = result.data.totalPage;
					for (var i = 0; i < result.data.totalPage; i++) {
						navlist[navlist.length] = i + 1;
					}
					let navHtml = template("navs", {
						navs : navlist,
						totalPage : totalPage,
						nowPage : nowPage
					});
					$("#page").prevAll().remove();
					$("#pagelist").prepend(navHtml);
					
					let onavHtml = template("onavs",{
						navs : navlist
					})
					$("#page").html(onavHtml);
					
					//导航栏默认值设置
					$("#page").val(nowPage);
					
					//设置首尾页
					function checkpage() {
						let firstpage = $("#firstpage");
						let previouspage = $("#previouspage");
						let nextpage = $("#nextpage");
						let endpage = $("#endpage");

						if (nowPage == 1) {
							firstpage.remove();
							previouspage.remove();
						}

						if (nowPage == totalPage) {
							nextpage.remove();
							endpage.remove();
						}
					}
					checkpage();

				}
			})
		}

		showpage(1);//默认进来就展示不带任何条件的第一页数据
		
		//一键清空查询条件
		$("#btnclear").click(function(){
			$("#orderno").val("");
			$("#starttime").val("");
			$("#endtime").val("");
			$("#status").val("不限");
		})

		//点击搜索时查询数据
		$("#btnsearch").click(function() {
			showpage(1);
		})
	
		//实现导航栏页面跳转
		$("#pagelist").on("click", ".navlink", function(e) {
			showpage($(e.target).attr("datapage"));
		})
	
		//实现下拉框导航栏页面跳转
		$("#page").change(function(){
			showpage($("#page").val());
		})
		
		//查看详情页
		$(document).on("click","#vieworder",function(e){
			let oid =  $(e.currentTarget).prev().val();
			layer.open({
			  type: 2,
			  skin: 'layui-layer-rim', //加上边框
			  area: ['840px', '480px'], //宽高
			  content: 'order?opr=detailOrder&id='+oid
			});
		})
		
		//起始时间的日历弹出框
		laydate.render({
			elem : '#starttime', //指定元素
			theme : 'grid'
		});
		//结束时间的日历弹出框
		laydate.render({
			elem : '#endtime', //指定元素
			theme : 'grid'
		});

	})
</script>
<script id="orderdata" type="text/html">
{{set num=1}};
{{each orders as order}}
	<tr>
	<td>{{num++}}</td>
	<td>{{order.orderno}}</td>
	<td>{{order.uname}}</td>
	<td>{{order.ordertime}}</td>
	<td>{{order.receiveinfo}}</td>
	<td>{{order.paytype}}</td>
	<td>{{order.paytime}}</td>
	<td>{{order.money}}</td>
	<td>{{order.status}}</td>
	<td><div class="button-group">
		<input type="hidden" value="{{order.id}}">
		<a class="button border-main" href="javascript:;" id="vieworder"><span
			class="icon-edit"></span> 查看</a>
	</div></td>
	</tr>
	{{/each}}
</script>
<script id="navs" type="text/html">
	<a href="javascript:;" class="navlink" id="firstpage" datapage="1">首页</a> 
	<a href="javascript:;" class="navlink" id="previouspage" datapage="{{nowPage-1}}">上一页</a>
	{{each navs nav}}
		<a href="javascript:;" class="navlink" datapage="{{nav}}">{{nav}}</a>
	{{/each}}
	<a href="javascript:;" class="navlink" id="nextpage" datapage="{{nowPage+1}}">下一页</a> 
	<a href="javascript:;" class="navlink" id="endpage" datapage="{{totalPage}}">尾页</a> 
</script>
<script id="onavs" type="text/html">
	{{each navs nav}}
		<option value="{{nav}}">{{nav}}</option>
	{{/each}}
</script>

<body>
	<div class="panel admin-panel">
		<div class="panel-head">
			<strong class="icon-reorder"> 订单列表</strong>
		</div>
		<div class="padding border-bottom">
			<form method="get" action="order">
				<input type="hidden" name="opr" value="query" />
				<ul class="search" style="padding-left: 10px;">
					<li>订单编号：<input type="text" placeholder="请输入订单编号"
						name="orderno" class="input" value="" id="orderno"
						style="width: 150px; line-height: 17px; display: inline-block" />
					</li>
					<li>下单时间：<input type="text" placeholder="请输入起始时间" name=""
						class="input" value="" id="starttime"
						style="width: 150px; line-height: 17px; display: inline-block" />--
						<input type="text" placeholder="请输入结束时间" name="" class="input"
						value="" id="endtime"
						style="width: 150px; line-height: 17px; display: inline-block" />
					</li>
					<li><select name="" class="input" id="status"
						style="width: 100px; line-height: 17px;">
							<option value="不限">不限</option>
							<option value="待付款">待付款</option>
							<option value="已付款">已付款</option>
							<option value="已取消">已取消</option>
							<option value="已关闭">已关闭</option>
							<option value="已发货">已发货</option>
							<option value="已完成">已完成</option>
					</select></li>
					<li><button type="button" class="button border-red" id='btnclear'>
				<span class="icon-trash-o"></span>一键清空查询条件
			</button></li>
					<li><button class="button border-main icon-search"
							type="button" id="btnsearch">搜索</button></li>
				</ul>
			</form>
		</div>
		<table class="table table-hover text-center">
			<thead>
				<tr>
					<th>序号</th>
					<th>订单编号</th>
					<th>用户</th>
					<th>下单时间</th>
					<th>收货人</th>
					<th>支付形式</th>
					<th>支付时间</th>
					<th>金额</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="orderbody">
			</tbody>
			<tfoot id="navfoot">
				<tr>
					<td colspan="10">
						<div class="pagelist" id="pagelist">
							<select id="page">
						</select>
						</div>
						
					</td>
				</tr>
			</tfoot>
		</table>
	</div>
</body>
</html>